<!-- 添加实体的弹窗 -->
<template>
    <div class="add-entity-dialog">
        <el-dialog title="添加实体" :visible.sync="dialogVisible" width="85vw" :before-close="handleClose"
            :close-on-click-modal="false" :destroy-on-close="true">
            <div class="add-entity flex flex-row">
                <div class="add-entity-left-tree flex flex-col">
                    <div class="add-entity-tree-title flex justify-center items-center" style="height: 32px">
                        模型列表
                    </div>
                    <div class="add-entity-tree-box flex" style="height: calc(100% - 32px)">
                        <LeftTree :isGeneralFolderAndFile="true" :treeData="treeData" :showMenu="false"
                            @nodeClick="nodeClick">
                        </LeftTree>
                    </div>
                </div>
                <div class="add-entity-right-box flex flex-col">
                    <FolderDetail v-if="isFolder" ref="folderRef" :disabled="true" flag="modelManage"
                        :nodeInfo="currentSelectedNode">
                    </FolderDetail>
                    <FileDetail v-if="isFile" ref="fileRef" :disabled="true" :nodeInfo="currentSelectedNode"
                        @submit="submitForm">
                    </FileDetail>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import { getSelfModelTree } from "@/api/myspace/model-manage-tool/model-manage";
import LeftTree from "@/components/LeftTree/tree.vue";
import FolderDetail from "@/views/myspace/model-manage-tool/components/folder-detail.vue";
import FileDetail from "@/views/myspace/model-manage-tool/components/file-detail.vue";
export default {
    name: "AddEntityDialog",
    data() {
        return {
            dialogVisible: false,
            currentSelectedNode: null, // 当前选中的节点
            isFolder: false, // 当前点击的节点是否是文件夹
            isFile: false, // 当前点击的节点是否是文件
            treeData: [],
        }
    },
    components: {
        LeftTree,
        FolderDetail,
        FileDetail
    },
    created() {

    },
    watch: {
        dialogVisible(newValue) {
            if (!newValue) return;
            this.$nextTick(() => {
                this.getTreeData()
            });
        }
    },
    methods: {
        // 获取模型树
        getTreeData() {
            getSelfModelTree().then((res) => {
                if (res.code == 200 && Array.isArray(res.data)) {
                    this.treeData = res.data[0].commonTreeList;
                }
            });
        },

        // 节点点击
        nodeClick(node) {
            this.currentSelectedNode = node;
            if (this.currentSelectedNode.type == 0) {
                this.isFolder = true;
                this.isFile = false;
            } else {
                this.isFolder = false;
                this.isFile = true;
            }
        },

        // 弹窗关闭回调
        handleClose(done) {
            this.isFile = false;
            this.isFolder = false;
            done();
        },

        // 提交表单
        submitForm(formData) {
            this.$emit('submit', formData);
            this.dialogVisible = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.add-entity-dialog {
    .add-entity {
        width: 1630px;
        height: 700px;

        .add-entity-left-tree {
            height: 100%;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--ui-border-color-split);
            box-sizing: border-box;
            width: 230px;
            padding-right: 5px;

            .add-entity-tree-title {
                height: 35px;
                font-weight: 600;
                letter-spacing: 2px;
            }

            .add-entity-tree-box {
                flex-grow: 1;
            }
        }

        .add-entity-right-box {
            width: calc(100% - 240px);
            padding-left: 5px;
            box-sizing: border-box;
        }
    }
}
</style>